<template>
    <!-- 新增外层容器，用于控制整体页面布局 -->
    <div class="login-page">
        <div class="login-container">
            <!-- 标题 -->
            <h1 class="title">东软环保公众监督平台-网格员端</h1>
            <!-- 登录表单 -->
            <el-form ref="loginForm" :model="form" :rules="rules" class="login-form">
                <el-form-item  prop="workerCode">
                    <el-input  v-model="form.workerCode" placeholder="请输入登录编码"  >
                         <template #prefix>
                            <el-icon style="color: rgb(0, 153, 255); font-size: 14px;"><User /></el-icon>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input v-model="form.password" type="password" placeholder="请输入密码" >
                        <template #prefix>
                            <el-icon style="color: rgb(0, 153, 255); font-size: 14px;"><Lock /></el-icon>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button round type="primary" class="login-btn" @click="handleLogin">
                        登录
                    </el-button>
                </el-form-item>
            </el-form>
        </div>

    </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { ElMessage, ElInput, ElForm, ElFormItem, ElButton, ElIcon } from 'element-plus';
// 按需引入需要的图标组件
import { User, Lock } from '@element-plus/icons-vue';
import {loginApi} from '@/api/login';
// 若有路由跳转需求，可引入 useRouter
import { useRouter } from 'vue-router'; 

const isMobile = ref(false); // 标记是否为手机端
const loginForm = ref(null);
const form = ref({
    workerCode: '',
    password: ''
});

const rules = ref({
    workerCode: [
        { required: true, message: '请输入登录编码', trigger: 'blur' }
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' }
    ]
});

// 若需要路由跳转，初始化路由
const router = useRouter(); 
onMounted(() => {
   isMobile.value = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
  // 如果是电脑端，直接提示并跳转
  if (!isMobile.value) {
    ElMessage.error('该页面仅支持手机端访问，请使用手机打开');
    // 显示空白页面
    document.body.innerHTML = '<div style="text-align: center; margin-top: 100px;">请使用手机打开</div>';
  }
});
const handleLogin = async () => {
    // 这里先简单校验，实际可结合后端接口
  if (!form.value.workerCode || !form.value.password) {
    ElMessage.error('登录编码和密码不能为空')
    return 
  }
  // 假设接口请求成功示例（实际需替换）
  const result = await loginApi(form.value) 
  console.log(result)
  console.log(result.data)
  if (result.code ===200) { 
    ElMessage.success('登录成功')
    localStorage.setItem('loginUser', JSON.stringify(result.data))
    
    router.push('/feedbacktask')
  } else {
    ElMessage.error(result.message)
  }
  console.log(result)
};
</script>

<style scoped>
/* 外层新增包裹，用于控制整个页面的背景和布局（如果需要背景图等可在这里设置） */
.login-page {
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f5f7fa;
    background: url('@/assets/1.png') no-repeat center/cover; 
 
}

.login-container {
    max-width: 400px;
    width: 90%;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    padding: 24px;
    box-sizing: border-box;
    /* 通过 margin 让容器在垂直方向有合适的留白，也可以结合 transform 微调 */
    margin: auto 0;
}

.title {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    color: rgb(0, 153, 255);
    /* 有下划线 */
    text-decoration: underline;
    margin-bottom: 24px;
}

.login-form {
    width: 100%;
}

.login-btn {
    width: 100%;
}

/* 响应式适配，强化手机端体验 */
@media (max-width: 500px) {
    .title {
        font-size: 16px;
    }
}
</style>